<template>
    <div class="send">
        <!--<span class="time">{{date}}</span>-->
        <span class="msg">{{data}}</span>
        <span class="user">{{username}}</span>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                username: this.msg.username,
                data: this.msg.data,
                date: this.msg.date
            };
        },
        props: [
            'msg'
        ]
    };
</script>

<style scoped>
    .send {
        text-align: right;
        font-size: 10px;
        line-height: 40px;
    }

    .time {

    }

    .msg {
        background-color: #48d3da;
        border-radius: 6px;
        padding: 6px;
        color: #ffffff;
    }

    .user {
        font-weight: bold;
        background-color: #e7a4f3;
        border-radius: 10px;
        padding: 6px;
        margin: 0 5px;
    }
</style>
